<template>
  <view class="center">
    <view class="warn-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/Binding_3.png"></image></view>
    <view class="text">解除绑定，将无法收到学习服务通知</view>
    <view class="plain" @click='affirmRelieve'>确认解除</view>
    <view class="primary" @click="tradePhone">更换绑定手机号</view>
    <!-- 更换手机弹窗 -->
    <banding-phone ref="popupTrade"></banding-phone>
  </view>
</template>

<script>
  import bandingPhone from '@/components/loding/binding.vue'
  import { removePhone } from '@/utils/api.js' // 接口api
  export default{
    components: { bandingPhone },
    data() {
      return{
        
      }
    },
    methods: {
      // 确认解除
      async affirmRelieve() {
         const phoneData = await removePhone()
        if(phoneData.errorCode === 0 ) {
          uni.navigateTo({
            url: '/pages/binding_phone/again_binding'
          })
        }else{
          uni.showToast({ title: phoneData.message, icon:'none' })
        }
      },
      // 更换手机
      tradePhone() {
        uni.reLaunch({
          url: '/pages/binding_phone/index?num='+0
        })
      }
    }
  }
  
</script>

<style lang="scss" scoped>
  .center{
    padding-top: 60rpx;
    text-align: center;
    color: #262626;
    .warn-img{
      width: 240rpx;
      height: 240rpx;
      margin: auto;
    }
    .text{
      font-size: 28rpx;
      font-weight: bold;
      margin: 36rpx 0 48rpx 0;
    }
    .plain, .primary{
      width: 276rpx;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      border-radius: 36rpx;
      font-size: 28rpx;
      margin: auto;
    }
    .plain{
      border: 2rpx solid #FF800C;
      color: #FF800C;
      margin-bottom: 28rpx;
    }
    .primary{
      background: #FF800C;
      color: #FFFFFF;
    }
  }
</style>
